<template>
  <aside class="main-sidebar" id="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->
      <!--<div class="user-panel">-->
      <!--<div class="pull-left image">-->
      <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
      <!--</div>-->
      <!--<div class="pull-left info">-->
      <!--<p>Alexander Pierce</p>-->
      <!--&lt;!&ndash; Status &ndash;&gt;-->
      <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
      <!--</div>-->
      <!--</div>-->

      <!-- search form (Optional) -->
      <div action="#" method="get" class="sidebar-form" v-if="menu_search">
        <div class="input-group">
          <input type="text" name="q" class="form-control" v-model="menu_search_value" :placeholder="tr.search+tr.menu">
          <span class="input-group-btn">
                  <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                  </button>
                </span>
        </div>
      </div>
      <!-- /.search form -->

      <!-- Sidebar Menu -->
      <ul v-if="menu_expand_all" class="sidebar-menu a1" data-widget="tree" data-api="tree" data-accordion=0>
        <!--<li class="header">HEADER</li>-->
        <!-- Optionally, you can add icons to the links -->
        <!--<li style="height: 20px;"></li>-->
        <li v-for="action in filted_menu" :class="{active:true,treeview:action.submenu}">
          <a :href="action.url">
            <i v-html="action.icon"></i>
            <!--<i class="fa fa-link"></i>-->
            <span v-text="action.label"></span>
            <span v-if="action.submenu" class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                      </span>
          </a>
          <ul v-if="action.submenu" class="treeview-menu">
            <!--<li><a href="#">Link in level 2</a></li>-->
            <li v-for="subact in action.submenu" :class="{'active':is_active(subact)}">
              <a :href="subact.url">
                <i class="fa fa-circle-o"></i>
                <span v-text="subact.label"></span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <ul v-else class="sidebar-menu a2" data-widget="tree" >
        <!--<li class="header">HEADER</li>-->
        <!-- Optionally, you can add icons to the links -->
        <!--<li style="height: 20px;"></li>-->
        <li v-for="action in filted_menu" :class="{active:is_active(action),treeview:action.submenu}">
          <a :href="action.url">
            <i v-html="action.icon"></i>
            <!--<i class="fa fa-link"></i>-->
            <span v-text="action.label"></span>
            <span v-if="action.submenu" class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
          </a>
          <!--二级菜单-->
          <ul v-if="action.submenu" class="treeview-menu">
            <!--<li><a href="#">Link in level 2</a></li>-->
            <!--leve2_url(subact)-->
            <li v-for="subact in action.submenu" :class="{'active':is_active(subact),treeview:subact.submenu}">
              <a  :href="subact.url">
                <i class="fa fa-circle-o"></i>
                <span v-text="subact.label"></span>
                <span v-if="subact.submenu" class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                              </span>
              </a>

              <!--三级菜单-->
              <ul v-if="subact.submenu" class="treeview-menu">
                <li v-for="sub_subact in subact.submenu" :class="{'active':is_active(sub_subact)}">
                  <a :href="sub_subact.url">
                    <i class="fa fa-square-o"></i>
                    <span v-text="sub_subact.label"></span>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>
</template>
<script>
export  default {
  props:{
    menu:{},
    menu_expand_all:{},
    menu_search:{},
    menu_search_value:{}
  },
  data(){
    return {
      tr:cfg.tr,
    }
    // menu:menu,
    // menu_expand_all:menu_expand_all,
    // menu_search:menu_search,
    // menu_search_value:'',

  },
  computed:{
    filted_menu:function(){
      var tmp_menus = ex.copy(this.menu)
      if(this.menu_search_value == ''){
        return tmp_menus
      }
      var self=this
      var valid_menus = ex.filter(tmp_menus,function(menu){
        return menu.label.toLowerCase().indexOf(self.menu_search_value.toLowerCase()) !=-1
      })

      ex.each(tmp_menus,function(menu){
        if(menu.submenu && menu.submenu.length != 0 ){
          if(! ex.isin(menu,valid_menus)){
            ex.remove(menu.submenu,function(act){
              return act.label.toLowerCase().indexOf(self.menu_search_value.toLowerCase()) ==-1
            })
          }
        }
      })
      ex.remove(tmp_menus,function(menu){
        if(ex.isin(menu,valid_menus)){
          return false
        }
        if(!menu.submenu || menu.submenu.length == 0){
          return true
        }else{
          return false
        }
      })
      return tmp_menus
    }
  },
  methods:{
    is_active:function(action){
      var self=this
      if (action.url == location.pathname){
        return true
      }else if(action.url ==location.pathname+location.search){
        // 路由形页面
        return  true
      }
      else if(action.submenu){
        var find_submenu_active= false
        for(var i=0;i<action.submenu.length;i++){
          var subact = action.submenu[i]
          find_submenu_active = self.is_active(subact)
          if(find_submenu_active){
            return true
          }
        }
        return find_submenu_active
      }else{
        return false
      }
    },
    leve2_url:function(action){
      if(this.is_active(action)){
        return location.pathname
      }else{
        return ''
      }

    },
  }
}
</script>